<template>
	<view>
		<JobForm ref="child" v-if="showResult === false" type="add" :enable_addjob_num="enable_addjob_num" @submit="submit"></JobForm>

		<view v-if="showResult === true">
			<view class="box_5">
				<view class="tx1">职位发布成功</view>
				<view class="tx2">推荐使用职位置顶，立即提升招聘效果</view>
				<view class="btn_box">
					<view class="btn_item blue" @click="addAgain">再发一条</view>
					<view class="btn_item" @click="handleJump('/company/CompanyIndex')">会员中心</view>
					<view class="btn_item" @click="handleJump('/company/JobList')">管理职位</view>
					<view class="clear"></view>
				</view>
			</view>
			<view class="form_split_10" v-if="result_audit == 1"></view>
			<view class="box_6" v-if="result_audit == 1">
				<view class="head_txt">
					职位置顶
					<text>即刻提高18倍曝光量</text>
				</view>
				<view class="item" v-for="(item, index) in result_service_list" :key="index">
					{{ item.name }}
					<view class="price">
						<text>￥</text>
						{{ item.expense }}
					</view>
					<u-button class="service_btn" shape="circle" type="primary" size="mini" @click="handleTip">购买</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<CustomerModal ref="CustomerModal"></CustomerModal>
	</view>
</template>

<script>
import JobForm from './components/JobForm';
import CustomerModal from '@/components/CustomerModal.vue';
import http from '@/utils/http';
import api from '@/api';
export default {
	name: 'AddJob',
	components: {
		JobForm,
		CustomerModal
	},
	data() {
		return {
			showResult: false,
			result_id: 0,
			result_audit: 0,
			result_service_list: [],
			enable_addjob_num: 0
		};
	},
	created() {
		this.fetchData();
	},
	methods: {
		handleJump(path) {
			uni.navigateTo({
				url: path
			});
		},
		handleTip() {
			this.$nextTick(() => {
				this.$refs.CustomerModal.getCustomer();
			});
		},
		addAgain() {
			this.fetchData();
			this.showResult = !this.showResult;
		},
		fetchData() {
			http.get(api.company_check_jobadd_num, {})
				.then(res => {
					this.enable_addjob_num = res.data.data.enable_addjob_num;
				})
				.catch(() => {});
			http.get(api.company_jobadd_pre, {})
				.then(res => {
					this.$refs.child.field_rule = res.data.data.field_rule;
				})
				.catch(() => {});
		},
		submit(values) {
			values.contact.weixin = values.contact.mobile;
			http.post(api.company_jobadd_save, values)
				.then(res => {
					this.result_id = res.data.data.id;
					this.result_audit = [...res.data.data.audit];
					this.result_service_list = [...res.data.data.service_stick_list];
					this.showResult = true;
				})
				.catch(() => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.box_6 {
	.item {
		/deep/ .service_btn {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translate(0, -50%);
		}

		.price {
			color: #ff6600;
			font-size: 30rpx;
			font-weight: bold;
			position: absolute;
			right: 212rpx;
			top: 50%;
			transform: translate(0, -50%);

			text {
				font-size: 18rpx;
			}
		}

		position: relative;
		width: 100%;
		padding: 41rpx 340rpx 41rpx 20rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		border: 2rpx solid #e2e2e2;
		border-radius: 14rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		&:not(:last-child) {
			margin-bottom: 30rpx;
		}
	}

	.head_txt {
		text {
			font-size: 24rpx;
			color: #c9c9c9;
			margin-left: 24rpx;
		}

		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
		padding: 55rpx 0 35rpx;
	}

	width: 100%;
	background-color: #ffffff;
	padding: 0 34rpx;
}

.box_5 {
	.btn_box {
		.btn_item {
			float: left;
			font-size: 28rpx;
			color: #1787fb;
			border: 2rpx solid #1787fb;
			padding: 10rpx 36rpx;
			background-color: #fff;
			border-radius: 60rpx;

			&.blue {
				background-color: #1787fb;
				color: #fff;
			}

			&:not(:first-child) {
				margin-left: 30rpx;
			}
		}

		margin: 0 auto;
		width: 626rpx;
		padding-bottom: 84rpx;
	}

	.tx2 {
		padding: 35rpx 0 65rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.tx1 {
		font-size: 48rpx;
		color: #333333;
		display: inline-block;
		padding: 13rpx 0 13rpx 106rpx;
		background-image: url(./static/img/success_green.png);
		background-repeat: no-repeat;
		background-position: 0 center;
		background-size: 80rpx;
	}

	width: 100%;
	background-color: #ffffff;
	padding-top: 120rpx;
	text-align: center;
}
</style>
